<template>
  <div class="home">
    <!-- 这个是搜索框 -->

    <div class="navbox">
      <div class="navtop" @click="clickShouSuo">
        <div class="nav-logo">
          <img class="auto-img" src="../assets/logo.png" alt="" />
        </div>
        <div class="nav-shousui">
          <input type="text" placeholder="请输入需要搜索的商品" />
          <div class="shousuo-img">
            <img class="auto-img" src="../assets/sousuo.png" alt="" />
          </div>
        </div>
      </div>

      <!-- 滚动导航 -->
      <div class="navdataTop">
        <van-tabs
          background="none"
          title-inactive-color="white"
          color="white"
          title-active-color="white"
        >
          <van-tab
            v-for="(item, index) in topnavdatas"
            :title="item.text"
            :key="index"
          >
            <!-- 内容 -->
          </van-tab>
        </van-tabs>
      </div>
    </div>

    <!-- 这个是首页轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in CarouselImg" :key="index">
        <img class="auto-img" :src="item.img" alt="" />
      </van-swipe-item>
    </van-swipe>

    <!-- 每日推举 -->
    <div class="middle-box">
      <div
        class="box-item"
        v-for="(item, index) in middleNavDatas"
        :key="index"
      >
        <div class="item-img">
          <img class="auto-img" :src="item.img" alt="" />
        </div>
        <div class="item-content">{{ item.text }}</div>
      </div>
    </div>

    <!-- 人器爆款 -->
    <div class="renqibaokuan">
      <div v-for="(items,indexs) in paoductsdata" :key="indexs">
      <div class="title">{{items.title}}</div>
      <div class="renqibaokuan-item">
      <div v-for="(item,index) in items.list" :key="index" @click="productDetails(item.sku)">
        <DetailedProducts :pro="item"></DetailedProducts>
      </div>
    </div>
      <div class="mingxing">
        <div class="ming-img">
          <img src="" alt="" />
        </div>
        <div class="ming-content">
          <div class="1cot"></div>
          <div class="cot-price"></div>
        </div>
      </div>

      <!-- 明星数据 -->
      <div class="Star">
        <div class="main" v-for="(item, index) in homelist" :key="index">
          <div class="titles">{{ item.title }}</div>
          <div v-for="(value, key) in item.list" :key="key" @click="productDetails(value.sku)">
            <div class="img">
              <img class="auto-img" :src="value.img" />
            </div>
            <p>{{ value.title }}</p>
            <li v-if="index == 0">&yen;{{ value.currentPrice }}</li>
          </div>
        </div>
      </div>

      <!-- 垂直轮播图 -->
      <div class="cuizhi">
        <van-notice-bar
          left-icon="volume-o"
          :scrollable="false"
          background="white"
        >
          <van-swipe
            vertical
            class="notice-swipe"
            :autoplay="3000"
            :show-indicators="false"
          >
            <van-swipe-item
              v-for="(item, index) in textlunboData"
              :key="index"
              scrollable
              left-icon="#e4393c"
            >
              <div class="lunbotext">
                <div class="title-left">【{{ item.tag }}】</div>
                <div class="title-right">{{ item.text }}</div>
              </div>
            </van-swipe-item>
          </van-swipe>
        </van-notice-bar>
      </div>
    </div>
  </div>

    <!-- 安全驾驶 -->
    <div class="Automobile">
      <div v-for="(item, index) in automobileData" :key="index">
        <img class="auto-img" :src="item.img" alt="" />
      </div>
    </div>

    <!-- 360智选 -->
    <div class="Intelligentselection">
      <div v-for="(item, index) in IntelligentselectionData" :key="index" >
        <div class="selection-title">{{ item.title }}</div>
        <!-- 图片 -->
        <div class="IntSelImg">
          <div
            class="IntSelImg-img"
            v-for="(img, imgindex) in item.ads"
            :key="imgindex"
          >
            <img class="auto-img" :src="img.img" />
          </div>
        </div>
        <!-- 商品 -->
        <div class="productSelection">
          <div v-for="(item2, index2) in item.list" :key="index2" @click="productDetails(item2.sku)">
            <ProductType :pro="item2"></ProductType>
          </div>
        </div>
      </div>
    </div>

    <!-- 360防火墙 -->
    <div class="firewall">
      <div
        class="fir-nav-img"
        v-for="(item, index) in firewallImg"
        :key="index"
      >
        <img class="auto-img" :src="item.img" alt="" />
      </div>

      <!-- 内容商品 -->
      <div class="firewall-content">
        <div v-for="(item2, index2) in firewallData" :key="index2" >
          <div
            class="cont-top-img"
            v-for="(item3, index3) in item2.ads"
            :key="index3"
          >
            <img class="auto-img" :src="item3.img" alt="" />
          </div>
          <div class="cont-item">
            <div class="ittt">
              <div
                class="co-it-son"
                v-for="(item4, index4) in item2.list"
                :key="index4" @click="productDetails(item4.sku)"
              >
                <ProductType :pro="item4"></ProductType>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 扫地机器人 -->
    <div class="robot">
      <div
        class="robot-img"
        v-for="(Img, Imgindex) in robotImg"
        :key="Imgindex"
      >
        <img class="auto-img" :src="Img.img" alt="" />
      </div>
      <div class="robot-content">
        <div
          class="robot-cont"
          v-for="(item, index) in robotData"
          :key="index"
          :style="{ backgroundColor: item.cardcolor }"
        >
          <div
            class="robot-content-img"
            v-for="(toIm, toImindex) in item.ads"
            :key="toImindex"
          >
            <img class="auto-img" :src="toIm.img" alt="" />
          </div>

          <div class="robot-prodre">
            <div v-for="(item2, index2) in item.list" :key="index2" @click="productDetails(item2.sku)">
              <ProductType :pro="item2"></ProductType>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 智能家居 -->
    <div class="robot">
      <div
        class="robot-img"
        v-for="(Img, Imgindex) in SmartHomeImg"
        :key="Imgindex"
      >
        <img class="auto-img" :src="Img.img" alt="" />
      </div>
      <div class="robot-content">
        <div
          class="robot-cont"
          v-for="(item, index) in SmartHomeData"
          :key="index"
          :style="{ backgroundColor: item.cardcolor }"
        >
          <div
            class="robot-content-img"
            v-for="(toIm, toImindex) in item.ads"
            :key="toImindex"
          >
            <img class="auto-img" :src="toIm.img" alt="" />
          </div>

          <div class="robot-prodre">
            <div v-for="(item2, index2) in item.list" :key="index2"  @click="productDetails(item2.sku)">
              <ProductType :pro="item2"></ProductType>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 智能手表 -->
    <div class="robot">
      <div
        class="robot-img"
        v-for="(Img, Imgindex) in IntelligentWatchImg"
        :key="Imgindex"
      >
        <img class="auto-img" :src="Img.img" alt="" />
      </div>
      <div class="robot-content">
        <div
          class="robot-cont"
          v-for="(item, index) in IntelligentWatchData"
          :key="index"
          :style="{ backgroundColor: item.cardcolor }"
        >
          <div
            class="robot-content-img"
            v-for="(toIm, toImindex) in item.ads"
            :key="toImindex"
          >
            <img class="auto-img" :src="toIm.img" alt="" />
          </div>

          <div class="robot-prodre">
            <div v-for="(item2, index2) in item.list" :key="index2"  @click="productDetails(item2.sku)">
              <ProductType :pro="item2"></ProductType>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 解锁智能新生活 -->
    <div class="robot">
      <div
        class="robot-img"
        v-for="(Img, Imgindex) in SmartlifeImg"
        :key="Imgindex"
      >
        <img class="auto-img" :src="Img.img" alt="" />
      </div>
      <div class="robot-content">
        <div
          class="robot-cont"
          v-for="(item, index) in SmartlifeData"
          :key="index"
          :style="{ backgroundColor: item.cardcolor }"
        >
          <div
            class="robot-content-img"
            v-for="(toIm, toImindex) in item.ads"
            :key="toImindex"
            @click="productDetails(item.item_id)"
          >
            <img class="auto-img" :src="toIm.img" alt="" />
          </div>

          <div class="robot-prodre">
            <div
              v-for="(item2, index2) in item.list"
              :key="index2"
              @click="productDetails(item.item_id)" 
            >
              <ProductType :pro="item2"></ProductType>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--  -->

    <div class="footerproduct-box">
      <div class="box-content">
        <div>
          <div class="box-content-title">: 好物推荐 :</div>
          <div class="box-content-items">
            <div
              class="box-content-item"
              v-for="(item, index) in haowutuijuData"
              :key="index"
              @click="productDetails(item.item_id)"
            >
              <FooterProduct :pro="item"></FooterProduct>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div>
      <van-empty
        class="custom-image"
        image="https://img0.baidu.com/it/u=205934348,1287107291&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=410"
        description="没有更多了..."
      />
    </div>
  </div>
</template>

<script>
// 引入js数据好物推荐
import { Haowutuiju } from "../json/Haowutuiju";
// import { homedata } from "../json/homedata";
//引入头部导航数据
import { topnavdata } from "../json/topnavdata";

// 需要引用
// import{getintroduce} from "../api/introduce"
import { getSearchData } from "../api/introduce";

// 导入商品组件
import DetailedProducts from "../components/DetailedProducts.vue";

// 导入360智选商品组件
import ProductType from "../components/ProductType.vue";

// 导入底部商品组件
import FooterProduct from "../components/FooterProduct.vue";

export default {
  name: "Home",
  components: {
    DetailedProducts,
    ProductType,
    FooterProduct,
  },

  data() {
    return {
      //人气数据
      paoductsdata:[],
      totleHomeData: [],
      // 轮播图数据img
      CarouselImg: [],
      //定义一个头部导航栏数组
      topnavdatas: [],
      //中间每日推举数据
      middleNavDatas: [],
      //明星数据
      meirejingxunDatas: [],
      // 文字导航轮播图
      textlunboData: [],
      // 汽车驾驶数据
      automobileData: [],
      //360智选
      IntelligentselectionData: [],
      // 防火墙导航图
      firewallImg: [],
      //防火墙商品数据
      firewallData: [],
      // 扫地机器人img
      robotImg: [],
      //扫地机器人数据
      robotData: [],
      // 智能家居Img
      SmartHomeImg: [],
      //智能家居数据
      SmartHomeData: [],
      // 智能手表图片
      IntelligentWatchImg: [],
      // 智能手表数据
      IntelligentWatchData: [],
      // 解锁智能新生活Img
      SmartlifeImg: [],
      // 解锁智能新生活数据
      SmartlifeData: [],

      //滚动导航数据,
      homelist: [],
      rollActiveIndex: 0,
      boxlisi: [],

      // 好物推荐
      haowutuijuData: [],
    };
  },

  created() {
    // getintroduce().then(data=>{
    //   console.log("首页",data);
    // })

    getSearchData()
      .then((data) => {
        // console.log("首页=》", data.data);

        this.totleHomeData = data.data;
        // this.getboxlistFum()
        this.gethomelistFun();

        this.getCarouseImg();
        // console.log("首页111=》", this.totleHomeData);
      })
      .catch((err) => {
        console.log("首页请求的数据=>", err);
      });
  },

  //方法
  methods: {
    gethomelistFun() {
      this.homelist.push(this.totleHomeData[2].subl);
      this.homelist.push(this.totleHomeData[2].subr);
      // console.log(this.homelist, "11");
    },
    // getboxlistFum(){
    // },

    getCarouseImg() {
      // 拿到轮播图数据img
      let lubotuImg = this.totleHomeData[0].list;
      this.CarouselImg = lubotuImg;

      //赋值给data的轮播图数组

      // 拿到头部导航栏的数据
      let topnavdatas = topnavdata[0].data.channel.list;
      // console.log("this.carouseLIng=>",topnavdata);

      //拿到中间的每日推举数据
      let middleNavData = this.totleHomeData[1].list;
      this.middleNavDatas = middleNavData;

      // console.log(" this.middleNavDatas=>", this.middleNavDatas);

      // 明星，精选
      let meirejingxunData = this.totleHomeData[2].subl.list;
      this.meirejingxunDatas = meirejingxunData;
      // console.log("meirejingxunData=>", meirejingxunData);

      // 轮播图数据文字
      let textData = this.totleHomeData[2].notice;
      this.textlunboData = textData;
      this.paoductsdata.push(this.totleHomeData[2])
      // console.log("this.textlunboData=>", this.paoductsdata);

      // 汽车驾驶图片
      // this.automobileData.push(homedata[3]);
      // console.log("this.automobileData=>", this.automobileData);

      // 360智选
      let IntSelData = this.totleHomeData[4];
      this.IntelligentselectionData.push(IntSelData);

      // 防火墙
      this.firewallImg.push(this.totleHomeData[5]);
      this.firewallData.push(this.totleHomeData[6]);

      // 扫地机器人
      this.robotImg.push(this.totleHomeData[7]);
      this.robotData.push(this.totleHomeData[8]);

      // 智能家居
      this.SmartHomeImg.push(this.totleHomeData[9]);
      this.SmartHomeData.push(this.totleHomeData[10]);

      // 只能手表图片
      this.IntelligentWatchImg.push(this.totleHomeData[11]);
      //只能手表数据
      this.IntelligentWatchData.push(this.totleHomeData[12]);

      // 智能新生活Img
      this.SmartlifeImg.push(this.totleHomeData[13]);
      // 智能新生活数据
      this.SmartlifeData.push(this.totleHomeData[14]);

      //赋值给头部导航数组
      this.topnavdatas = topnavdatas;

      // 好物推荐
      this.haowutuijuData = Haowutuiju;
    },

    // 这个是查看商品详情
    productDetails(itemID) {
      console.log("itemID=>", itemID);
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        loadingType: 'spinner',
      })
      setTimeout(() => {
        this.$router.push({ name: "Details", params: { itemID } });
        
      }, 1000);
    },

    //跳转搜索
    clickShouSuo(){
      this.$router.push({name:"ShouSuo"})
    },

    
  },
};
</script>

<style lang="scss" scoped>
.navbox{
  position: fixed;
  height: 100px;
  width: 100%;
  top:0;
  z-index: 999;
  background-color: #7bb3f5;
}
.renqibaokuan-item{
  display: flex;
}
// 底部商品
.footerproduct-box {
  margin-top: 10px;
  .box-content {
    padding: 10px;
    .box-content-items {
      display: flex;
      flex-wrap: wrap;

      .box-content-item {
        margin-right: 12px;
        background-color: white;
        margin-top: 10px;
        &:nth-child(2n) {
          margin-right: 0;
        }
        width: calc(50% - 8px);
      }
    }
    .box-content-title {
      font-size: 18px;
      font-weight: bold;
      margin: 0 auto;
      text-align: center;
    }
  }
}

// 扫地机器人
.robot {
  .robot-prodre {
    margin: 5px;

    box-sizing: border-box;
    padding: 4px;
    background-color: white;
    display: flex;
    flex-wrap: wrap;
    border-radius: 10px;
    overflow: hidden;
  }
  .robot-cont {
    border-bottom: 1px solid #fff;
    margin-top: 5px;
  }
  .robot-content {
    width: 95%;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
  }

  .robot-img {
    width: 100%;
    margin-bottom: 10px;
  }
}

//360防火墙
.firewall {
  margin-top: 10px;
  .firewall-content {
    margin: 10px auto;
    width: 95%;

    border-radius: 10px;
    background-color: #dbe9da;
    overflow: hidden;
    box-sizing: border-box;
    .cont-item {
      // background-color: #dbe9da;
      padding: 5px;

      .ittt {
        background-color: white;
        display: flex;
        flex-wrap: wrap;
        border-radius: 10px;
      }
    }
  }
  .fir-nav-img {
    width: 100%;
  }
}

// 360智选
.Intelligentselection {
  width: 90%;
  padding: 10px;
  background-color: white;
  margin: 0 auto;
  border-radius: 10px;
  .selection-title {
    font-size: 16px;
    font-weight: bold;
  }

  .IntSelImg {
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    .IntSelImg-img {
      width: 165px;
      margin-top: 5px;
      margin-right: 6px;
      &:nth-child(2n) {
        margin-right: 0;
      }
    }
  }
  .productSelection {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    .ProSelItem {
      width: 105px;
      overflow: hidden;
      margin-right: 10px;
      &:nth-child(3n) {
        margin-right: 0;
      }
    }
    .ProSelItem-img {
      width: 105px;
    }
  }
}

// 汽车驾驶
.Automobile {
  margin: 10px 0;
}
.title-left {
  color: #e4393c;
}
.title-right {
  color: #000;
}
.lunbotext {
  display: flex;
}
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
.cuizhi {
  margin-top: 10px;
}
.Star {
  display: flex;
  width: 100%;
  .main {
    padding: 3px;
    display: flex;
    flex-wrap: wrap;
    width: 50%;
    .titles {
      padding: 10px 0;
      font-size: 16px;
      font-weight: bold;
      margin-top: 20px;
      width: 100%;
    }
    p {
      text-align: center;
    }
    div {
      width: 50%;
    }
    .img {
      width: 88px;

      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    p {
      padding: 5px 0;
    }
    li {
      text-align: center;
      color: red;
    }
  }
}

// 人气爆款
.renqibaokuan {
  margin: 0 10px;
  background: white;
  padding: 0 5px;
  .title {
    height: 36px;
    line-height: 36px;
    font-weight: bold;
    font-size: 16px;
    border-radius: 5px;
  }
}

// 每日推举导航
.middle-box {
  height: 85px;
  padding: 0 5px;
  display: flex;
  margin-top: 10px;

  .box-item {
    text-align: center;
    height: 75px;
    width: 73px;
    .item-img {
      margin: 5px 13px;
      width: 45px;
      height: 45px;
    }
  }
}

.navdataTop {
  z-index: 99;
  position: fixed;
  top: 50px;
  //内容
}

.navtop {
  display: flex;
  position: absolute;
  top: 15px;
  padding: 0 10px;
  height: 30px;
  z-index: 99;
  .nav-logo {
    width: 30px;
    height: 30px;
    margin-top: 3px;
  }
  .nav-shousui {
    border-radius: 15px;
    display: flex;
    height: 30px;
    background-color: white;
    margin-left: 15px;
    input {
      width: 258px;
      padding: 8px;
      border: none;
      outline: none;
      border-radius: 15px;
    }
    .shousuo-img {
      width: 25px;
      height: 25px;
      padding-right: 8px;
      margin-top: 2px;
    }
  }
}
.home {
  padding-bottom: 100px;
  background: #f4f1f2;

}

// .van-swipe {
//   position: fixed;
//   top: -40px;
// }
</style>

